<template>
	<view class="resvervation">
		<scroll-view :scroll-y="true" style="height: 100%">
			<view class="resvervation-box">
				<view>办事事项</view>
				<view style="color: gray">{{ office.business.name || '' }}</view>
			</view>
			<view class="resvervation-box">
				<view>办理部门</view>
				<view>不动产登记中心</view>
			</view>
			<view class="resvervation-box">
				<view>办理地点</view>
				<view>{{ office.hall.name }}</view>
			</view>
			<view class="resvervation-box">
				<view>身份类型</view>
				<view style="color: gray" @click="userTypeShow = true">{{ office.userType.name || '请选择身份类型' }}</view>
			</view>
			<!-- 权利人 -->
			<view v-show="office.userType.id == '1'">
				<view class="resvervation-box">
					<view style="margin-right: 20rpx">权利人身份证号</view>
					<u--input disabled placeholder="请输入内容" border="bottom" inputAlign="right" v-model="office.userType.qlr"></u--input>
				</view>
			</view>
			<!-- 代办人 -->
			<view v-show="office.userType.id == '2'">
				<view class="resvervation-box">
					<view style="margin-right: 20rpx">代办人身份证号</view>
					<u--input disabled style="text-align: right" placeholder="请输入内容" border="bottom" inputAlign="right" v-model="office.userType.dbr"></u--input>
				</view>
				<view class="resvervation-box">
					<view>权利人身份证号</view>
					<u--input placeholder="请输入内容" border="bottom" inputAlign="right" v-model="office.userType.qlr"></u--input>
				</view>
			</view>
			<!-- 买受方 -->
			<view v-show="office.userType.id == '3'">
				<view class="resvervation-box">
					<view style="margin-right: 20rpx">买受方身份证号</view>
					<u--input disabled placeholder="请输入内容" border="bottom" inputAlign="right" v-model="office.userType.msf"></u--input>
				</view>
				<view class="resvervation-box">
					<view>权利人身份证号</view>
					<u--input placeholder="请输入内容" border="bottom" inputAlign="right" v-model="office.userType.qlr"></u--input>
				</view>
			</view>
			<view v-for="item in office.business.material" :key="item.id" class="file-up-box">
				<view class="uptitle">{{ item.name }}</view>
				<view class="">
					<!-- 文件 -->
					<u-upload
						v-if="item.type === 'file'"
						@delete="handleDeleteFile"
						uploadIcon="file-text"
						@afterRead="handleFileRead"
						:fileList="fileList"
						accept="all"
						maxSize="10485760"
						maxCount="1"
						multiple
						:previewFullImage="true"
					></u-upload>
					<!-- 照片 -->
					<u-upload
						v-if="item.type === 'image'"
						@delete="handleDeleteImage"
						@afterRead="handleImageRead"
						:fileList="imageList"
						accept="image"
						maxSize="10485760"
						maxCount="1"
						multiple
						:previewFullImage="true"
					></u-upload>
					<!-- 文字 -->
					<u-input v-if="item.type === 'txt'" v-model="item.fileNumber" :placeholder="`请输入${item.name}`" border="surround"></u-input>
				</view>
			</view>
			<view class="work-day">预约日期</view>
			<scroll-view :scroll-x="true">
				<view class="work-list">
					<view
						v-for="(item, index) in workList"
						:key="index"
						:class="selectedWorkDay == item.day + item.month ? 'selected-work select-work' : 'select-work'"
						@click="handleSelectWorkDay(item)"
					>
						<view style="width: 220rpx">{{ item.week }}</view>
						<view style="width: 220rpx">{{ item.year }}-{{ item.month < 10 ? '0' + item.month : item.month }}-{{ item.day < 10 ? '0' + item.day : item.day }}</view>
					</view>
				</view>
			</scroll-view>

			<view class="work-time">
				<view
					v-for="(item, index) in workerTimeArr"
					:key="index"
					@click="handleClickTime(item)"
					:class="{ 'time-tag': true, 'disabled-tag': item.disabled, 'selected-tag': item.checked }"
				>
					<view>{{ item.time_a.substr(0, 5) + '~' + item.time_b.substr(0, 5) }}</view>
				</view>
			</view>
			<button @click="handleYuYue" style="margin: 30rpx 0">确定预约</button>
		</scroll-view>
		<u-popup :show="dataConfirmShow" mode="center" round="8" :customStyle="{width: '730rpx'}">
			<view class="data-confirm-title">核对预约信息</view>
			<scroll-view :scroll-y="true" style="height: 400rpx">
				<view class="data-confirm">
					<!-- <view class="work-day">基本信息</view> -->
					<view class="data-info">
						<view class="data-info-title">办事事项</view>
						<view class="data-info-content">{{ office.business.name }}</view>
					</view>
					<view class="data-info">
						<view class="data-info-title">办理部门</view>
						<view class="data-info-content">不动产登记中心</view>
					</view>
					<view class="data-info">
						<view class="data-info-title">办理地点</view>
						<view class="data-info-content">{{ office.hall.name }}</view>
					</view>
					<view class="data-info">
						<view class="data-info-title">身份类型</view>
						<view class="data-info-content">{{ office.userType.name }}</view>
					</view>
					<view v-show="office.userType.id == '1'">
						<view class="data-info">
							<view class="data-info-title">权利人身份证</view>
							<view class="data-info-content">{{ office.userType.qlr }}</view>
						</view>
					</view>
					<view v-show="office.userType.id == '2'">
						<view class="data-info">
							<view class="data-info-title">代办人身份证</view>
							<view class="data-info-content">{{ office.userType.dbr }}</view>
						</view>
						<view class="data-info">
							<view class="data-info-title">权利人身份证</view>
							<view class="data-info-content">{{ office.userType.qlr }}</view>
						</view>
					</view>
					<view v-show="office.userType.id == '3'">
						<view class="data-info">
							<view class="data-info-title">买受方身份证</view>
							<view class="data-info-content">{{ office.userType.msf }}</view>
						</view>
						<view class="data-info">
							<view class="data-info-title">权利人身份证</view>
							<view class="data-info-content">{{ office.userType.qlr }}</view>
						</view>
					</view>
					<!-- <view class="work-day">文件信息</view> -->
					<view class="data-info" v-for="item in upData.materials" :key="item.id">
						<view class="data-info-title">{{ item.name }}</view>
						<view class="data-info-content" v-if="item.type == 'image'">
							<u--image :src="item.value" width="80px" height="80px"></u--image>
						</view>
						<view class="data-info-content" v-if="item.type == 'txt' || item.type == 'file'">{{ item.value }}</view>
					</view>
					<!-- <view class="work-day">预约时间</view> -->
					<view class="data-info">
						<view class="data-info-title">预约时间</view>
						<view class="data-info-content">{{ upData.yuyue_time_b }}--{{ selectedWorkTimeUp[1] }}</view>
					</view>
					<!-- <view class="data-info">
						<view class="data-info-title">结束时间</view>
						<view class="data-info-content">{{ upData.yuyue_time_e }}</view>
					</view> -->
					<!-- <view class="work-day">预约提示</view> -->
				</view>
			</scroll-view>
			<view class="tips" v-html="reservationTipHtml"></view>
			<view class="btn-box">
				<u-button text="返回修改" :customStyle="{ marginRight: '20px' }" @click="dataConfirmShow = false"></u-button>
				<u-button type="primary" text="确定预约" @click="handleSubmitReservation"></u-button>
			</view>
		</u-popup>
		<u-popup :show="popupShow" mode="center" round="8" :customStyle="{width: '730rpx'}">
			<view class="popup-content">
				<view class="title-icon">
					<u-icon label="预约成功" labelPos="bottom" size="40" name="checkmark-circle" color="#19be6b"></u-icon>
				</view>
				<view class="success-info-box">
					<view style="width: 5em">预约大厅</view>
					<view style="text-align: right">{{ successInfo.officename }}</view>
				</view>
				<view class="success-info-box">
					<view style="width: 5em">预约类型</view>
					<view style="text-align: right">{{ successInfo.servicename }}</view>
				</view>
				<view class="success-info-box">
					<view style="width: 5em">预约时间</view>
					<view style="text-align: right">{{ successInfo.pre_book_time_a }}-{{ successInfo.pre_book_time_b && successInfo.pre_book_time_b.substr(11, 5) }}</view>
				</view>
				<view style="color: red; margin-top: 20rpx">
					<view v-html="reservationOkTipHtml"></view>
					<!-- <view>预约成功后，需携带预约人身份证再预约日预约时间段结束前前往服务中心取票机取预约号码，叫号将顺延，请耐心等待！</view> -->
				</view>
				<view style="margin-top: 20rpx">
					<u-button :text="OKbutton" :disabled="OKbutton != '确认'" @click="handleJumpToReservationDetail"></u-button>
				</view>
			</view>
		</u-popup>
		<u-picker :show="userTypeShow" :columns="[userTypeArr]" keyName="name" @cancel="userTypeShow = false" @confirm="handleUserTypeValue"></u-picker>
	</view>
</template>

<script>
import { reservationTime, reservationOK, fileUpload, reservationOkTip, reservationTip, userIDcardType } from '../utils/methods.js';
export default {
	onShareAppMessage(res) {
		return {
			title: '石家庄不动产中心',
			path: '/pages/index'
		};
	},
	onLoad(data) {
		if (data.hall) {
			this.office.hall = JSON.parse(data.hall);
		}
		if (data.business) {
			this.office.business = JSON.parse(data.business);
			this.office.business.material.forEach((item) => {
				if (item.type === 'txt') {
					item.fileNumber = '';
				}
			});
		}
	},
	data() {
		return {
			userTypeArr: [],
			userTypeShow: false,
			reservationTipHtml: '',
			dataConfirmShow: false,
			OKbutton: '确认3',
			reservationOkTipHtml: '',
			successInfo: {},
			popupShow: false,
			selectedWorkDayUp: '',
			selectedWorkTimeUp: [],
			fileList: [],
			imageList: [],
			selectedWorkDay: '',
			workerTimeArr: [],
			workList: [],
			office: {
				hall: {},
				business: {},
				userType: {
					id: '',
					name: '',
					qlr: '',
					dbr: '',
					msf: ''
				}
			},
			upData: {
				office_id: '', //  大厅id  可选
				service_id: '', //    业务id  可选
				yuyue_time_b: '', // 开始预约时间  可选
				yuyue_time_e: '', // 结束预约时间  可选
				materials: [], //  材料  可选
				qlr: '', // 权利人
				dbr: '', // 代办人
				msf: '' // 买受方
			}
		};
	},
	methods: {
		// 获取身份类型
		handleGetUserIdCardType() {
			userIDcardType().then((res) => {
				if (res.data.code == 0) {
					this.userTypeArr = res.data.data;
				}
			});
		},
		// 确定预约
		handleSubmitReservation() {
			console.log(this.upData, 'RTRTRTRT')
			reservationOK(this.upData)
				.then((res) => {
					if (res.data.code === 0) {
						this.dataConfirmShow = false;
						this.successInfo = res.data.data;
						reservationOkTip().then((tip) => {
							if (tip.data.code === 0) {
								this.reservationOkTipHtml = tip.data.data.html;
								if (tip.data.data.time > 0) {
									let time = tip.data.data.time;
									let timer = setInterval(() => {
										if (time === 0) {
											this.OKbutton = '确认';
											clearInterval(timer);
											return;
										}
										this.OKbutton = '确认' + String(time);
										time--;
									}, 1000);
								} else {
									this.OKbutton = '确认';
								}
								this.popupShow = true;
							}
						});
					} else if (res.data.code == 500) {
						uni.showToast({
							title: res.data.msg,
							duration: 2000,
							icon: 'none'
						});
					}
				})
				.catch((err) => {
					uni.showToast({
						title: '预约失败',
						duration: 2000,
						icon: 'none'
					});
				});
		},
		// 设置身份类型（默认类型）
		handleSetUserType() {
			this.office.userType.name = uni.getStorageSync('typeName');
			this.office.userType.id = uni.getStorageSync('type');
			if (this.office.userType.id == 1) {
				this.office.userType.qlr = uni.getStorageSync('idCard');
			} else if (this.office.userType.id == 2) {
				this.office.userType.dbr = uni.getStorageSync('idCard');
			} else if (this.office.userType.id == 3) {
				this.office.userType.msf = uni.getStorageSync('idCard');
			}
		},
		// 设置身份类型（自主选择）
		handleUserTypeValue(obj) {
			this.office.userType.qlr = '';
			this.office.userType.dbr = '';
			this.office.userType.msf = '';
			this.office.userType.name = obj.value[0].name;
			this.office.userType.id = obj.value[0].id;
			if (this.office.userType.id == 1) {
				this.office.userType.qlr = uni.getStorageSync('idCard');
			} else if (this.office.userType.id == 2) {
				this.office.userType.dbr = uni.getStorageSync('idCard');
			} else if (this.office.userType.id == 3) {
				this.office.userType.msf = uni.getStorageSync('idCard');
			}
			this.userTypeShow = false;
		},
		handleJumpToReservationDetail() {
			this.popupShow = false;
			// 跳转至预约列表
			uni.reLaunch({
				url: '/pages/index'
			});
		},
		handleYuYue() {
			// 大厅id
			this.upData.office_id = this.office.hall.id;
			// 业务id
			this.upData.service_id = this.office.business.id;
			if (!this.upData.service_id) {
				uni.showToast({
					title: '请选择办事事项',
					duration: 2000,
					icon: 'none'
				});
				return;
			}
			this.upData.qlr = this.office.userType.qlr;
			this.upData.dbr = this.office.userType.dbr;
			this.upData.msf = this.office.userType.msf;
			if (this.office.userType.id === 2 || this.office.userType.id === 3) {
				if (!this.upData.qlr) {
					uni.showToast({
						title: '权利人身份证号必填',
						duration: 2000,
						icon: 'none'
					});
					return;
				}
			}
			// 预约时间
			this.upData.yuyue_time_b = this.selectedWorkDayUp + ' ' + this.selectedWorkTimeUp[0];
			this.upData.yuyue_time_e = this.selectedWorkDayUp + ' ' + this.selectedWorkTimeUp[1];
			if (!this.selectedWorkDayUp) {
				uni.showToast({
					title: '请选择预约日期',
					duration: 2000,
					icon: 'none'
				});
				return;
			}
			if (this.selectedWorkTimeUp.length == 0) {
				uni.showToast({
					title: '请选择预约时间',
					duration: 2000,
					icon: 'none'
				});
				return;
			}
			let arrIndex = [];
			this.upData.materials.forEach((item, index) => {
				if (item.type == 'txt') {
					arrIndex.push(index);
				}
			});
			arrIndex.reverse();
			arrIndex.forEach((item) => {
				this.upData.materials.splice(item, 1);
			});
			this.office.business.material.forEach((item) => {
				if (item.type === 'txt' && item.fileNumber != '') {
					this.upData.materials.push({
						id: item.id,
						type: item.type,
						name: item.name,
						value: item.fileNumber
					});
				}
			});
			if (this.upData.materials.length < this.office.business.material.length) {
				uni.showToast({
					title: '请补全预约信息',
					duration: 2000,
					icon: 'none'
				});
				return;
			}
			reservationTip().then((res) => {
				if (res.data.code == 0) {
					this.reservationTipHtml = res.data.data.html;
					this.dataConfirmShow = true;
				}
			});
		},
		handleDeleteFile(index, file, name) {
			this.fileList.splice(index.index, 1);
			const upMaterialsIndex = this.upData.materials.findIndex((item) => item.type === 'file');
			if (upMaterialsIndex != -1) {
				this.upData.materials.splice(upMaterialsIndex, 1);
			}
		},
		handleDeleteImage(index, file, name) {
			this.imageList.splice(index.index, 1);
			const upMaterialsIndex = this.upData.materials.findIndex((item) => item.type === 'image');
			if (upMaterialsIndex != -1) {
				this.upData.materials.splice(upMaterialsIndex, 1);
			}
		},
		handleFileRead(file, lists, name) {
			this.fileList = file.file;
			fileUpload(this.fileList[0].url)
				.then((res) => {
					this.office.business.material.forEach((item) => {
						if (item.type === 'file') {
							this.upData.materials.push({
								id: item.id,
								type: item.type,
								name: item.name,
								value: JSON.parse(res.data).data.path
							});
						}
					});
				})
				.catch((err) => {
					this.fileList = [];
					uni.showToast({
						title: '上传失败',
						duration: 2000,
						icon: 'none'
					});
				});
		},
		handleImageRead(file, lists, name) {
			this.imageList = file.file;
			fileUpload(this.imageList[0].url)
				.then((res) => {
					this.office.business.material.forEach((item) => {
						if (item.type === 'image') {
							this.upData.materials.push({
								id: item.id,
								type: item.type,
								name: item.name,
								value: JSON.parse(res.data).data.path
							});
						}
					});
				})
				.catch((err) => {
					this.imageList = [];
					uni.showToast({
						title: '上传失败',
						duration: 2000,
						icon: 'none'
					});
				});
		},
		handleClickTime(item) {
			if (item.disabled) {
				uni.showToast({
					title: '预约已满',
					duration: 2000,
					icon: 'none'
				});
				return;
			}
			this.workerTimeArr.forEach((itc) => {
				itc.checked = false;
			});
			item.checked = true;
			this.selectedWorkTimeUp = [item.time_a.substr(0, 5), item.time_b.substr(0, 5)];
		},
		handleSelectWorkDay(item) {
			this.workerTimeArr.forEach((workertimer) => {
				workertimer.checked = false;
			});
			this.selectedWorkDay = item.day + item.month;
			this.workerTimeArr = item.times;
			let year = item.year;
			let month = item.month < 10 ? '0' + item.month : item.month;
			let day = item.day < 10 ? '0' + item.day : item.day;
			this.selectedWorkDayUp = year + '-' + month + '-' + day;
		},

		handleGetReservationTime() {
			reservationTime(this.office.hall).then((res) => {
				if (res.data.code == 0) {
					res.data.data.forEach((item) => {
						item.times.forEach((itc) => {
							itc.checked = false;
							if (itc.pre_book === 0) {
								itc.disabled = true;
							} else {
								itc.disabled = false;
							}
						});
					});
					this.workList = res.data.data;
					this.handleSelectWorkDay(this.workList[0]);
				}
			});
		}
	},
	mounted() {
		this.handleGetReservationTime();
		this.handleSetUserType();
		this.handleGetUserIdCardType();
	}
};
</script>

<style lang="less">
.data-confirm-title {
	width: 100%;
	text-align: center;
	box-sizing: border-box;
	font-size: 40rpx;
	font-weight: 600;
	border-bottom: 1px solid #f3f3f3;
	padding: 30rpx 0;
}
.btn-box {
	padding: 0 20rpx 40rpx;
	display: flex;
	justify-content: space-between;
	// margin-bottom: 20rpx;
}
.tips {
	padding: 20rpx;
}
.resvervation {
	padding: 20rpx;
	height: 100%;
	.data-confirm {
		width: 100%;
		padding: 0rpx 20rpx;
		box-sizing: border-box;

		.data-info {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10rpx 0;
			.data-info-title {
				text-align: left;
				min-width: 200rpx;
			}
			.data-info-content {
				text-align: right;
				word-break: break-all;
			}
		}
	}

	.popup-content {
		width: 100%;
		padding: 40rpx 20rpx;
		box-sizing: border-box;
		.title-icon {
			width: 100%;
			display: flex;
			justify-content: center;
		}
		.success-info-box {
			padding: 10rpx 0;
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}
	.resvervation-box {
		padding: 30rpx 0rpx;
		border-bottom: 1px solid #f3f3f3;
		font-weight: 600;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.file-up-box {
		.uptitle {
			border-left: 10rpx solid #0c45bd;
			color: #0c45bd;
			padding: 20rpx;
			font-size: 40rpx;
			font-weight: 600;
			margin: 20rpx 0rpx;
		}
	}
	.work-day {
		border-left: 10rpx solid #0c45bd;
		color: #0c45bd;
		padding: 20rpx;
		font-size: 40rpx;
		font-weight: 600;
		margin: 20rpx 0rpx;
	}
	.work-list {
		display: flex;
		flex-wrap: nowrap;
		.select-work {
			text-align: center;
			padding: 10rpx;
			margin: 0rpx 10rpx;
		}
		.selected-work {
			border-bottom: 2px solid #2f76fd;
			color: #2f76fd;
			font-weight: 600;
		}
	}
	.work-time {
		display: flex;
		flex-wrap: wrap;
		.time-tag {
			margin: 40rpx 10rpx 20rpx 10rpx;
			width: 280rpx;
			padding: 20rpx;
			border: 1px solid #3c9cff;
			border-radius: 10rpx;
			color: #3c9cff;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.selected-tag {
			background-color: #3c9cff;
			color: white;
		}
		.disabled-tag {
			background-color: #f3f3f3;
		}
	}
}
</style>
